<template>
  <div class="SearchContainer">
    <span class="spanSearch">输入搜索</span>
    <el-input v-model="input" placeholder="请输入用户昵称或手机号......"></el-input>
    <span class="spanSearch">上次消费时间</span>
    <el-date-picker type="date"  placeholder="开始日期" v-model="form.date1" ref="date1"></el-date-picker>
    <span class="spanDiv"></span>
    <el-date-picker type="date"  placeholder="结束日期" v-model="form.date2" ref='date2'></el-date-picker>
    <el-button type="primary" @click="searchData">查询</el-button>
    <el-button @click='resetBtn'>重置</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      input: '',
      form: {
        date1:'',
        date2:''
      }
    }
  },
  methods: {
    searchData(){
      if(this.form.date1 === null && this.form.date1 === null){
            this.form.date1= ''
            this.form.date2= ''
      }
      console.log(this.form.date1)
      this.$emit('searchParent',this.input,this.form.date1,this.form.date2)
    },
    resetBtn(){
      this.input =''
      this.form.date1= ''
      this.form.date2= ''
      this.$emit('searchParent',this.input,this.form.date1,this.form.date2)
    }
  },
}
</script>

<style lang="less" scoped>
  .SearchContainer{
    height: 64px;
    background-color: white;
    padding: 24px 30px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    /deep/.el-button--info{
      width: 40px;
    }
    .spanSearch{
      font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
      font-weight: bold;
      font-size: 16px;
      color: #333333;
      margin-right: 8px;
    }
    .el-input{
      width: 250px;
      margin-right: 30px;
    }
    .el-date-editor{
      width: 200px;
    }
    .el-date-editor{
      margin-right: 16px;
    }
    .spanDiv{
      display: inline-block;
      width: 20px;
      height: 1px;
      background-color: #e7e8e9;
      margin-right: 16px;
    }
    .el-button--primary{
      margin-left: 30px;
      width: 90px;
      font-weight: bold;
    }
    .el-button--default{
      margin-left: 30px;
      width: 90px;
      font-weight: bold;
    }
  }
  
</style>